@use "@/assets/styles/mixin";

.attachment-container{
  position: relative;
  flex: 1;
  overflow-y: auto;
  //margin-top: 20px;
  //padding-top:5px ;
   padding: 20px;
}
.time-line {
  margin-left: 47px;
}

.attachment-type{
  @include mixin.flex-inline-flex;
  min-width: 100px;
  width: fit-content;
  height: 32px;
  padding: 0 18px;
  box-sizing: border-box;
  margin-left: -70px;
  background-color: #D0E7FF;
  border-radius: 4px;
  font-size: 16px;
  color: #007DFF;
  line-height: 24px;
}

.attachment-field{
  padding: 10px 20px;
  box-sizing: border-box;
  background-color: #F2F3F5;
  border-radius: 4px;
  &-name{
    @include mixin.flex-align;
    padding-bottom: 10px;
    border-bottom: 1px solid #D8D8D8;
    .name-icon{
      width: 4px;
      height: 16px;
      margin-right: 8px;
      background-color: #007DFF;
      border-radius: 2px;
    }
    .name-label{
      font-size: 14px;
      color: #3D3D3D;
      line-height: 24px;
    }
  }
  &-content{
    padding-top: 10px;
    .file-item{
      @include mixin.flex-between;
      & + .file-item{
        margin-top: 10px;
      }
    }
    .content-file{
      font-size: 16px;
      color: #007DFF;
      line-height: 22px;
      cursor: pointer;
      &+.content-file{
        margin-top: 10px;
      }
    }
  }
  &-empty{
    @include mixin.flex-center;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid #F2F3F5;
    border-radius: 4px;
    .field-empty-icon{
      @include mixin.flex;
      margin-top: 10px;
    }
    .annex-empty{
      font-size: 64px;
    }
    .field-empty-label{
      @include mixin.flex;
      flex-direction: column;
      line-height: 24px;
      &>span:first-child{
        font-size: 16px;
        color: #3D3D3D;
      }
      &>span:last-child{
        font-size: 12px;
        color: #86909C;
      }
    }
  }
}

